<template>
  <div class="personMic-container">
    <van-steps direction="vertical" v-if="userMicStatus">
      <van-step v-for="item in micList" :key="item.mic_id">
        <div class="hasDay">{{ dayjs(item.pubDate).format('M.D') }}
          <div class="yearDate"><span>/</span>{{ dayjs(item.pubDate).year() }}</div>
        </div>
        <div class="content">
          <div class="title">{{ item.content }}</div>
          <van-image
            class="coverImg"
            width="2.5rem"
            height="2.5rem"
            fit="cover"
            v-for="(el,index) in String(item.cover).split('$$')" :key="index"
            :src="el"
            @click="previewImages(el,index)"
          />
          <div class="date">
            <svg-icon icon-class='xin-dingwei' width="15px" height="15px" class="icon"/>
            <span>{{ item.IpLocation }}</span>
          </div>
        </div>
      </van-step>
    </van-steps>
    <div class="noDefined" v-else>
      <svg-icon icon-class='defined' width="200px" height="200px" class="icon"/>
      <p>此人无动态</p>
    </div>
  </div>
</template>

<script>
import { postUserMicAPI } from '@/api'
import dayjs from 'dayjs'
import { ImagePreview } from 'vant'

export default {
  name: 'personMic',
  data () {
    return {
      micList: [],
      userMicStatus: true
    }
  },
  created () {
    this.postUserMic()
  },
  methods: {
    dayjs,
    async postUserMic () {
      const { data: res } = await postUserMicAPI({ userId: this.$route.params.userId })
      if (res.message.status === false) {
        this.userMicStatus = res.message.status
        return
      }
      this.micList = res.message
      console.log(this.micList)
    },
    // 图片放大预览
    previewImages (url, index) {
      ImagePreview({
        images: [url],
        showIndex: false
      })
    }
  }
}
</script>

<style scoped lang="less">
.personMic-container {

  .van-step {
    color: unset;
  }

  ::v-deep .van-steps {
    color: black;

    .van-steps__items {
      padding-right: 15px;

      .van-hairline {
        padding: 18px 0 10px
      }
    }

    .van-step__title {
      display: flex;
      align-items: center;

      .hasDay {
        color: #ec87c0;
        font-size: 22px;
        font-weight: bold;
        padding-right: 10px;
        margin-right: 5px;

        .yearDate {
          padding-left: 15px;
          font-size: 12px;
          font-weight: normal;
          display: flex;
          align-items: center;
          padding-top: 10px;

          span {
            color: #ac92eb;
            font-size: 28px;
          }
        }
      }

      .content {
        font-size: 12px;
        margin-bottom: 3px;

        .title {
          font-size: 15px;
          font-weight: 700;
          margin-bottom: 15px;
          word-break: break-all;
          letter-spacing: 1px;
          font-family: "微软雅黑 Light", serif;
        }

        .coverImg {
          margin-right: 4px;
        }
      }
    }
  }

  ::v-deep .van-icon-checked:before {
    content: '';
    width: 20px;
    height: 20px;
    background: url("@/assets/track.png") no-repeat center;
    background-size: cover;
  }

  ::v-deep .van-step__title--active {
    color: black;

    .hasDay {
      color: #ec87c0;
    }

    .content {
      .title {
        letter-spacing: 1px;
      }
    }
  }

  ::v-deep .van-step__circle {
    width: 20px;
    height: 20px;
    background: url("@/assets/track.png") no-repeat center;
    background-size: cover;
  }

  .noDefined {
    text-align: center;
  }
}

</style>
